<template>
	<view class="container">
		<cu-header-banner :images="swiperList" isBack="true">
			<block slot="left">
				<text class="cuIcon-back"></text>
				返回
			</block>
			<block slot="content" class="page-name">{{parameter.name}}</block>
		</cu-header-banner>
		<view class="padding-sm">
			<view class="padding-sm bg-white">
				<view class="flex justify-between">
					<view>
						<text class="text-size-12 text-red">￥</text>
						<text class="text-size-34 text-red text-blod">1634.23</text>
						<text class="cu-tag bg-red margin-left-sm  round text-size-32">券后￥999元</text>
					</view>
					<view>销量1238件</view>
				</view>

				<view class="flex margin-top-sm">
					<view class="cu-tag bg-red light sm round">5元无门槛</view>
					<view class="cu-tag bg-green light sm round">限时999元</view>
				</view>
				<view class="text-size-28 text-black text-bold margin-top-sm">
					Iphone12Pro精品手机全网通最新款
				</view>
			</view>
			<view class="cu-card flex justify-between align-center  radius bg-white margin-top-sm padding-sm">
				<view>
					<text class="cuIcon-activityfill size-44 text-red "></text>
					<text class="text-size-32 text-black margin-left-sm">排行榜</text>
					<text class="text-size-18 text-black margin-left-sm">口红热卖榜11名</text>
				</view>
				<view class="cuIcon-right"></view>
			</view>
			<view class="cu-card radius bg-white margin-top-sm ">
				<cu-title title="评价" hint="2w+" modal="3"></cu-title>
				<view class="flex  padding-xs margin-left">
					<view class="cu-tag bg-red light sm round">款式漂亮</view>
					<view class="cu-tag bg-green light sm round">高端大气</view>
					<view class="cu-tag bg-green light sm round">质感极佳</view>
				</view>
				<cu-list-comment></cu-list-comment>
			</view>
			<view class="cu-card radius bg-white margin-top-sm ">
				<cu-title title="问答" hint="10条" modal="3"></cu-title>
				<view class="padding-bottom-sm">
					<view class="padding-xs flex justify-between" v-for="(item,index) in 3" :key="index">
						<view>
							<text class="cuIcon-questionfill text-green"></text>
							<text class="margin-left-xs text-size-28 text-black ">这宝贝好用吗，性价比如何？</text>
						</view>
						<view>6个回答</view>
					</view>
				</view>
			</view>
			<view class="cu-card radius bg-white margin-top-sm ">
				<view class="flex justify-between align-center padding-sm" @click="$util.redirectTo('/pages/shop/child/store')">
					<view class="flex ">
						<view>
							<image class="image_107" src="../../../static/icon_events.png"></image>
						</view>
						<view class="margin-left-sm">
							<view class="text-size-30 text-black text-bold">布鲁斯美妆店</view>
							<view>
								<text class="margin-right-sm">店铺星级</text>
								<text class="cuIcon-favorfill text-red"></text>
								<text class="cuIcon-favorfill text-red"></text>
								<text class="cuIcon-favorfill text-red"></text>
								<text class="cuIcon-favorfill text-red"></text>
								<text class="cuIcon-favorfill text-red"></text>
								<text class="margin-left">3434人关注</text>
							</view>

						</view>
					</view>
					<view class="cuIcon-right"></view>
				</view>
				<cu-grid-media cols="4" :datas="goods"></cu-grid-media>
				<view class="flex flex-wrap justify-center padding-sm">
					<button class="cu-btn line-gray round">联系客服</button>
					<button class="cu-btn line-gray round margin-left">进店逛逛</button>
				</view>
			</view>
			<view class="text-center padding-sm">
				<text class="text-size-32 text-red text-blod">推荐商品</text>
			</view>
			<cu-grid-media cols="2" :datas="goods"></cu-grid-media>
			<view style="height: 100rpx;margin-top: 1rem;"></view>
		</view>
		<view class="fixed foot">
			<cu-navbar-multi :datas="btns" :datas2="bottoms" btnStyle="1" @onclick="onClickMenu"></cu-navbar-multi>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import cuHeaderBanner from '@/components/diy/header/cu-header-banner.vue';
	import cuNavbarMulti from '@/components/diy/footer/cu-navbar-multi.vue';
	import cuTitle from '@/components/diy/content/cu-title.vue';
	import cuListComment from '@/components/diy/list/cu-list-comment.vue';
	import cuGridMedia from '@/components/diy/list/cu-grid-media.vue';
	export default {
		computed: {
			...mapState([])
		},
		components: {
			cuHeaderBanner,
			cuNavbarMulti,
			cuTitle,
			cuListComment,
			cuGridMedia
		},
		data() {
			return {
				bg: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg',
				btns: [{
					bg: 'red',
					text: '加入购物车',
				}, {
					bg: 'orange',
					text: '立即购买'
				}],
				bottoms: [{
					bg: 'red',
					badge: 0,
					text: '店铺',
					cuIcon: 'favorfill',
					path:'/pages/shop/child/store'
				}, {
					bg: 'orange',
					badge: 0,
					text: '购物车',
					cuIcon: 'cart',
					path:'/pages/shop/cart'
				}],
				swiperList: [{
						id: 0,
						type: 'image',
						url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
					},
					{
						id: 1,
						type: 'image',
						url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg'
					},
					{
						id: 2,
						type: 'image',
						url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
					}
				],
				parameter: {},
				goods:this.$mock.goods
			};
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function(res) {
			if (res.from === 'button') {
				// 来自页面内分享按钮
				console.log(res.target);
			}
			return this.shareinfo;
		},
		onLoad(prop) {
			console.log(prop.title);
			this.parameter = prop;
		},
		onShow() {
			
		},
		methods: {
			...mapMutations(['logout', 'login', 'loginsoure']),
			onClickMenu: function(e) {
				if(e.type==1){
					console.log(this.btns[e.index].text);
					if(e.index==0){
						
					}else if(e.index==1){
						this.$util.redirectTo('/pages/shop/order/create');
					}
				}
				
			}

		}
	};
</script>

<style scoped></style>
